<!--
 * @Author       : xiaoxiaoguai
 * @Date         : 2025-06-04 11:34:07
 * @LastEditors  : Please set LastEditors
 * @LastEditTime : 2025-06-26 10:25:12
 * @Description  : 
-->
<template>
	<!-- custom-style="height: 50vh;" -->
	<uv-popup ref="goodDetailModalInner" round="10" mode="bottom" :safeAreaInsetBottom="false">
		<view class="good-detail-modal">
			<view class="cover" @tap="close">
				<view class="btn-group">
					<uv-icon name="close" color="#fff" size="18"></uv-icon>
				</view>
			</view>
			<view class="storeInfo">
				<view class="storeInfo_title">
					<text>门店信息</text>
					<view class="d-flex align-items-center">
						<view
							class="iconfont-yshop icon-mobile icon_custom"
							@click="makePhoneCall()"></view>
						<view
							class="iconfont-yshop icon-location icon_custom"
							@click="openLocation()"></view>
					</view>
				</view>
				<view class="storeInfo_content">电话: {{ store.mobile }}</view>
				<view class="storeInfo_content">
					地址: {{ store.addressMap }}{{ store.address }}
				</view>
				<view class="storeInfo_content">
					营业时间: {{ formatDateTime(store.startTime, 'hh:mm') }} -
					{{ formatDateTime(store.endTime, 'hh:mm') }}
				</view>
				<view class="storeInfo_title">门店公告</view>
				<view class="storeInfo_content">
					{{ store.notice }}
				</view>
				<uv-safe-bottom></uv-safe-bottom>
			</view>
		</view>
	</uv-popup>
</template>

<script setup>
	import { ref, reactive, watch, nextTick, getCurrentInstance, onMounted } from 'vue'
	import { useMainStore } from '@/store/store'
	import { formatDateTime, kmUnit, prePage } from '@/utils/util'

	import { storeToRefs } from 'pinia'
	const main = useMainStore()
	const { store, location, isLogin, themeColor } = storeToRefs(main)
	const goodDetailModalInner = ref()
	const open = () => {
		goodDetailModalInner.value.open()
	}
	const openLocation = () => {
		uni.openLocation({
			address: store.value.addressMap + store.value.address + ' ' + store.value.name,
			latitude: parseFloat(store.value.lat),
			longitude: parseFloat(store.value.lng),
			fail(res) {
				console.log(res)
			},
		})
	}
	const close = () => {
		goodDetailModalInner.value.close() // 关闭弹窗逻辑
	}
	const makePhoneCall = () => {
		uni.makePhoneCall({
			phoneNumber: store.value.mobile,
			fail(res) {
				console.log(res)
			},
		})
	}
	// 暴露方法
	defineExpose({
		open,
	})
</script>

<style scoped lang="scss">
	.good-detail-modal {
		background: #fff;
		border-radius: 10rpx 10rpx 0 0;
		height: 100%;
		padding: 80rpx 30rpx 30rpx 30rpx;
		.storeInfo {
			.storeInfo_title {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 34rpx;
				margin-top: 30rpx;
				font-weight: bold;
				.icon_custom {
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 34rpx;
					background: #f5f5f5;
					width: 56rpx;
					height: 56rpx;
					border-radius: 50%;
					color: $qingzhen-btn-primary-color;
					&:first-child {
						margin-right: 20rpx;
					}
				}
			}
			.storeInfo_content {
				font-size: 26rpx;
				color: #666;
				margin-top: 16rpx;
			}
		}
	}
	.cover {
		position: absolute;
		right: 20rpx;
		top: 20rpx;
		z-index: 99999999;
		.btn-group {
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 8rpx;
			width: 50rpx;
			height: 50rpx;
			background-color: #bfbebe;
			border-radius: 50%;
		}
	}
</style>
